<template>
  <div>App</div>
  <p>{{goodInfo.skuId}}-{{goodInfo.skuNum}}--{{goodInfo.skuName}}</p>
  <button @click="addSkuNum">数量的累加</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
});
</script>

<script setup lang="ts">
import { reactive } from "vue";

// reactive的内部原理
/* function reactive<T>(value:T){
  // 创建一个代理对象,并且对对象的所有的操作可以进行拦截(数据劫持)
  return new Proxy(value,{
    // 只要这个value被获取了,就会在这个地方拦截
    get(){
      // 收集依赖
    },
    // 只要这个value被设置了,就会在这个地方拦截
    set(){
      // 通知依赖更新
    },
    // 只要这个value被删除某个属性了,就会在这个地方拦截
    delete(){
      // 通知依赖更新
    }
    // ....
  })
} */

// 返回一个对象的响应式代理
// 响应式转换是"深层"得:它会影响到所有嵌套的属性
interface goodInfoType {
  skuId: number;
  skuNum: number;
  skuName: string;
}
const goodInfo = reactive<goodInfoType>({
  skuId: 1,
  skuNum: 3,
  skuName: "Apple13 pro max",
});

const addSkuNum = () => {
  console.log(goodInfo);
  goodInfo.skuNum++;
};
</script>

<style scoped></style>
